<template>
    <div class="borderBox">
        <div class="top">
            <div class="ContentBox">
                <sliderNumber />
                <!-- <slot name="top"></slot> -->
            </div>
        </div>
        <div class="left">
            <div class="Content">
                <slot name="left"></slot>
            </div>
        </div>
        <div class="right">
            <div class="Content">
                <slot name="right"></slot>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="bottom">
            <div class="Content">
                <slot name="bottom"></slot>
            </div>
        </div>
    </div>
</template>
<script setup>
import sliderNumber from './sliderNumber.vue';
</script>
<style lang="less" scoped>
.borderBox {
    border: 1px solid #ccc;
    position: relative;

    .top,
    .bottom,
    .left,
    .right {

        &::before,
        &::after {
            content: '';
            position: absolute;
            background-color: #ccc;
        }
    }

    .top,
    .bottom {
        height: 40px;
        position: relative;
    }

    .top::before {
        height: 1px;
        width: 94px;
        transform: rotateZ(25deg);
        transform-origin: 0 0;
    }

    .top::after {
        height: 1px;
        width: 96px;
        transform: rotateZ(-25deg);
        right: -10px;
        top: 40px;
        transform-origin: 0 0;
    }

    .bottom::before {
        height: 1px;
        width: 92px;
        top: 40px;
        transform: rotateZ(-25deg);
        transform-origin: 0 0;
    }

    .bottom::after {
        height: 1px;
        width: 94px;
        transform: rotateZ(25deg);
        right: -9px;
        transform-origin: 0 0;
    }

    .left,
    .right {
        height: 60px;
        width: 50%;
        float: left;
    }

    .left::before {
        height: 1px;
        right: 84px;
        left: 84px;
    }

    .left::after {
        width: 1px;
        height: 62px;
        left: 84px;
    }

    .right::before {
        height: 1px;
        right: 84px;
        left: 84px;
        top: 101px;
    }

    .right::after {
        width: 1px;
        height: 62px;
        right: 84px;
    }

    .ContentBox {
        width: 100%;
        height: 100%;
    }
}
</style>